<template>
    <div id="page">
        <div>
            <table id="myTable" border="1px">
            <thead>
            <tr>
                <td>商品id</td>
                <td>商品名称</td>
                <td>商品数量</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in nowData" :key="index">
                <td>{{item.g_id}}</td>
                <td>{{item.g_name}}</td>
                <td>{{item.g_num}}</td>
            </tr>
            </tbody>
        </table>
        </div>
    </div>
    <div class="page">
        <ul>
            <li>
                <a href="#"  v-on:click="prePage()">
                    <</a>
            </li>
            <li v-for="(item, index) in totalPage">
                <a href="#" v-on:click="toPage(index)" :class="{active: currentPage==index}">{{ index+1 }}</a>
            </li>
            <li>
                <a href="#" v-on:click="nextPage()">></a>
            </li>
        </ul>
    </div>
</template>

<style>
    #page{
        width: 500px;
        height: 100px;
        position: relative;
    }
    #page>div{
        position: absolute;
    }
</style>
<script>

export default {
  name: 'Hjw',
  components: {

  },
    data(){
        return{
            listArray:[
                {
                    'id':'1',
                    'name':'张三',
                    'num':'768',

                },
                {
                    'id':'2',
                    'name':'张三',
                    'num':'567',

                },
                {
                    'id':'3',
                    'name':'张三',
                    'num':'356',

                },
                {
                    'id':'4',
                    'name':'张三',
                    'num':'234',

                },
                {
                    'id':'5',
                    'name':'张三',
                    'num':'123',

                },

            ],
            // 总页数
            pageNum:1,
            // 每页显示的个数
            pageSize:2,
            // 当前页
            currentPage:0,
            // 总数据
            totalPage:[],
            // 当前显示的数据
            dataShow:[]
        }
        },
        methods: {
            nextPage(){
                var vm = this;
                if (vm.currentPage == vm.pageNum - 1) return;
                vm.dataShow = vm.totalPage[++vm.currentPage]
            },
            prePage(){
                var vm = this;
                if (vm.currentPage == 0) return;
                vm.dataShow = vm.totalPage[--vm.currentPage]
            },
            toPage(page){
                var vm = this;
                vm.currentPage = page
                vm.dataShow = vm.totalPage[vm.currentPage];
            }
        },
    create(){
        
        var vm = this;
        // 总页数
        vm.pageNum = Math.ceil(vm.listArray.length / vm.pageSize) || 1 ;
        for (var i = 0; i<vm.pageNum; i++) {
            vm.totalPage[i] = vm.listArray.slice(vm.pageSize * i, vm.pageSize * (i + 1))
        }
        vm.dataShow = vm.totalPage[vm.currentPage];
    }

}

</script>
